<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>web-component - Zero UI框架专用前端文档</title>
    
    <meta name="description" content="前端开发框架，官方地址：http://www.vertx-ui.cn" />
    
        <meta name="keywords" content="zero,zero-ui,vert.x" />
        <meta name="keyword" content="zero,zero-ui,vert.x" />
    
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <link type="text/css" rel="stylesheet" href="styles/zero.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h2><a href="http://www.vertxai.cn/document/doc-web/index.html" target="_blank" class="menu-item" id="website_link" >「Api」Zero Ai</a></h2><h2><a href="http://www.vertxui.cn/document/doc-web/index.html" target="_blank" class="menu-item" id="website_link" >「Api」Zero Ui</a></h2><h2><a href="http://www.vertxui.cn/document/doc-web-extension/index.html" target="_blank" class="menu-item" id="website_link" >「Api」Zero Ui Extension</a></h2><h2><a href="http://www.vertxui.cn" target="_blank" class="menu-item" id="website_link" >「Home」Zero UI</a></h2><h2><a href="http://www.vertxai.cn" target="_blank" class="menu-item" id="website_link" >「Home」Zero Ai</a></h2><h2><a href="http://www.vertxup.cn" target="_blank" class="menu-item" id="website_link" >「Home」Zero Framework</a></h2><h2><a href="http://www.origin-x.cn" target="_blank" class="menu-item" id="website_link" >「Home」Origin X Engine</a></h2><h3>Classes</h3><ul><li><a href="Ant.html">Ant</a><ul class='methods'><li data-type='method'><a href="Ant.html#.onAddonAfter">onAddonAfter</a></li><li data-type='method'><a href="Ant.html#.onChange">onChange</a></li><li data-type='method'><a href="Ant.html#.onDisabledDate">onDisabledDate</a></li><li data-type='method'><a href="Ant.html#.onFromTo">onFromTo</a></li><li data-type='method'><a href="Ant.html#.onMultiple">onMultiple</a></li><li data-type='method'><a href="Ant.html#.onPlaceHolder">onPlaceHolder</a></li><li data-type='method'><a href="Ant.html#.onPrefix">onPrefix</a></li><li data-type='method'><a href="Ant.html#.onReadOnly">onReadOnly</a></li><li data-type='method'><a href="Ant.html#.onSelect">onSelect</a></li><li data-type='method'><a href="Ant.html#.toConfig">toConfig</a></li><li data-type='method'><a href="Ant.html#.toDatum">toDatum</a></li><li data-type='method'><a href="Ant.html#.toDialogConfig">toDialogConfig</a></li><li data-type='method'><a href="Ant.html#.toMock">toMock</a></li><li data-type='method'><a href="Ant.html#.toOptions">toOptions</a></li><li data-type='method'><a href="Ant.html#.toOrigin">toOrigin</a></li><li data-type='method'><a href="Ant.html#.toParsed">toParsed</a></li><li data-type='method'><a href="Ant.html#.toRecord">toRecord</a></li><li data-type='method'><a href="Ant.html#.toTreeOptions">toTreeOptions</a></li><li data-type='method'><a href="Ant.html#.toUnique">toUnique</a></li></ul></li><li><a href="Cookie.html">Cookie</a><ul class='methods'><li data-type='method'><a href="Cookie.html#.get">get</a></li></ul></li><li><a href="Logger.html">Logger</a><ul class='methods'><li data-type='method'><a href="Logger.html#.filters">filters</a></li><li data-type='method'><a href="Logger.html#.layout">layout</a></li><li data-type='method'><a href="Logger.html#.mock">mock</a></li><li data-type='method'><a href="Logger.html#.render">render</a></li><li data-type='method'><a href="Logger.html#.request">request</a></li><li data-type='method'><a href="Logger.html#.response">response</a></li><li data-type='method'><a href="Logger.html#.sign">sign</a></li></ul></li><li><a href="Session.html">Session</a><ul class='methods'><li data-type='method'><a href="Session.html#.clear">clear</a></li><li data-type='method'><a href="Session.html#.get">get</a></li><li data-type='method'><a href="Session.html#.put">put</a></li><li data-type='method'><a href="Session.html#.remove">remove</a></li></ul></li><li><a href="Storage.html">Storage</a><ul class='methods'><li data-type='method'><a href="Storage.html#.clear">clear</a></li><li data-type='method'><a href="Storage.html#.get">get</a></li><li data-type='method'><a href="Storage.html#.getDirect">getDirect</a></li><li data-type='method'><a href="Storage.html#.put">put</a></li><li data-type='method'><a href="Storage.html#.remove">remove</a></li></ul></li><li><a href="Tree.html">Tree</a><ul class='methods'><li data-type='method'><a href="Tree.html#.CHILDREN">CHILDREN</a></li><li data-type='method'><a href="Tree.html#.CHILDREN_ALL">CHILDREN_ALL</a></li><li data-type='method'><a href="Tree.html#.CHILDREN_ALL_INCLUDE">CHILDREN_ALL_INCLUDE</a></li><li data-type='method'><a href="Tree.html#.PARENT">PARENT</a></li><li data-type='method'><a href="Tree.html#.PARENT_ALL">PARENT_ALL</a></li><li data-type='method'><a href="Tree.html#.PARENT_ALL_INCLUDE">PARENT_ALL_INCLUDE</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-_aggr.html">_aggr</a></li><li><a href="module-_ajax.html">_ajax</a><ul class='methods'><li data-type='method'><a href="module-_ajax.html#.ajax2Dialog">ajax2Dialog</a></li><li data-type='method'><a href="module-_ajax.html#.ajax2Message">ajax2Message</a></li><li data-type='method'><a href="module-_ajax.html#.ajax2True">ajax2True</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxDelete">ajaxDelete</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxDialog">ajaxDialog</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxDownload">ajaxDownload</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxEager">ajaxEager</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxError">ajaxError</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxFetch">ajaxFetch</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxGet">ajaxGet</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxMessage">ajaxMessage</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxPost">ajaxPost</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxPull">ajaxPull</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxPush">ajaxPush</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxPut">ajaxPut</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxResource">ajaxResource</a></li><li data-type='method'><a href="module-_ajax.html#.ajaxUpload">ajaxUpload</a></li><li data-type='method'><a href="module-_ajax.html#.asyncAssist">asyncAssist</a></li><li data-type='method'><a href="module-_ajax.html#.asyncData">asyncData</a></li><li data-type='method'><a href="module-_ajax.html#.asyncImage">asyncImage</a></li><li data-type='method'><a href="module-_ajax.html#.asyncMagic">asyncMagic</a></li><li data-type='method'><a href="module-_ajax.html#.asyncPromise">asyncPromise</a></li><li data-type='method'><a href="module-_ajax.html#.asyncTrue">asyncTrue</a></li><li data-type='method'><a href="module-_ajax.html#.asyncWrap">asyncWrap</a></li><li data-type='method'><a href="module-_ajax.html#.messageCatch">messageCatch</a></li><li data-type='method'><a href="module-_ajax.html#.messageFailure">messageFailure</a></li><li data-type='method'><a href="module-_ajax.html#.messageSuccess">messageSuccess</a></li><li data-type='method'><a href="module-_ajax.html#.microDelete">microDelete</a></li><li data-type='method'><a href="module-_ajax.html#.microFetch">microFetch</a></li><li data-type='method'><a href="module-_ajax.html#.microGet">microGet</a></li><li data-type='method'><a href="module-_ajax.html#.microPost">microPost</a></li><li data-type='method'><a href="module-_ajax.html#.microPush">microPush</a></li><li data-type='method'><a href="module-_ajax.html#.microPut">microPut</a></li><li data-type='method'><a href="module-_ajax.html#.rxEdict">rxEdict</a></li></ul></li><li><a href="module-_constant.html">_constant</a><ul class='members'><li data-type='member'><a href="module-_constant.html#.(%25E7%258E%25AF%25E5%25A2%2583%25E5%258F%2598%25E9%2587%258F)">(环境变量)</a></li><li data-type='member'><a href="module-_constant.html#.DEBUG">DEBUG</a></li><li data-type='member'><a href="module-_constant.html#.DEBUG_AJAX">DEBUG_AJAX</a></li><li data-type='member'><a href="module-_constant.html#.DEBUG_FORM">DEBUG_FORM</a></li><li data-type='member'><a href="module-_constant.html#.ECONOMY">ECONOMY</a></li><li data-type='member'><a href="module-_constant.html#.ENTRY_ADMIN">ENTRY_ADMIN</a></li><li data-type='member'><a href="module-_constant.html#.ENTRY_LOGIN">ENTRY_LOGIN</a></li><li data-type='member'><a href="module-_constant.html#.FORBIDDEN">FORBIDDEN</a></li><li data-type='member'><a href="module-_constant.html#.FORM_MODE">FORM_MODE</a></li><li data-type='member'><a href="module-_constant.html#.GRID">GRID</a></li><li data-type='member'><a href="module-_constant.html#.HTTP11">HTTP11</a></li><li data-type='member'><a href="module-_constant.html#.HTTP_METHOD">HTTP_METHOD</a></li><li data-type='member'><a href="module-_constant.html#.KEY_EVENT">KEY_EVENT</a></li><li data-type='member'><a href="module-_constant.html#.KEY_USER">KEY_USER</a></li><li data-type='member'><a href="module-_constant.html#.MENU_TYPE">MENU_TYPE</a></li><li data-type='member'><a href="module-_constant.html#.MIMES">MIMES</a></li><li data-type='member'><a href="module-_constant.html#.MOCK">MOCK</a></li><li data-type='member'><a href="module-_constant.html#.MONITOR">MONITOR</a></li><li data-type='member'><a href="module-_constant.html#.RX_SOURCE">RX_SOURCE</a></li><li data-type='member'><a href="module-_constant.html#.SELECTION">SELECTION</a></li><li data-type='member'><a href="module-_constant.html#.SIGN">SIGN</a></li><li data-type='member'><a href="module-_constant.html#.THEME">THEME</a></li><li data-type='member'><a href="module-_constant.html#.X_APP_ID">X_APP_ID</a></li><li data-type='member'><a href="module-_constant.html#.X_APP_KEY">X_APP_KEY</a></li><li data-type='member'><a href="module-_constant.html#.X_HEADER">X_HEADER</a></li><li data-type='member'><a href="module-_constant.html#.X_LANG">X_LANG</a></li><li data-type='member'><a href="module-_constant.html#.X_SIGMA">X_SIGMA</a></li><li data-type='member'><a href="module-_constant.html#.XT_FORMAT">XT_FORMAT</a></li></ul></li><li><a href="module-_develop.html">_develop</a><ul class='methods'><li data-type='method'><a href="module-_develop.html#.dgAjax">dgAjax</a></li><li data-type='method'><a href="module-_develop.html#.dgDebug">dgDebug</a></li><li data-type='method'><a href="module-_develop.html#.dgDiff">dgDiff</a></li><li data-type='method'><a href="module-_develop.html#.dgFileJson">dgFileJson</a></li><li data-type='method'><a href="module-_develop.html#.dgGraphic">dgGraphic</a></li><li data-type='method'><a href="module-_develop.html#.dgQuery">dgQuery</a></li><li data-type='method'><a href="module-_develop.html#.dgRouter">dgRouter</a></li><li data-type='method'><a href="module-_develop.html#.dgTodo">dgTodo</a></li><li data-type='method'><a href="module-_develop.html#.fxError">fxError</a></li><li data-type='method'><a href="module-_develop.html#.fxFailure">fxFailure</a></li><li data-type='method'><a href="module-_develop.html#.fxFatal">fxFatal</a></li><li data-type='method'><a href="module-_develop.html#.fxMessage">fxMessage</a></li><li data-type='method'><a href="module-_develop.html#.fxRedux">fxRedux</a></li><li data-type='method'><a href="module-_develop.html#.fxReject">fxReject</a></li><li data-type='method'><a href="module-_develop.html#.fxReport">fxReport</a></li><li data-type='method'><a href="module-_develop.html#.fxTerminal">fxTerminal</a></li><li data-type='method'><a href="module-_develop.html#.fxWarning">fxWarning</a></li></ul></li><li><a href="module-_element.html">_element</a><ul class='methods'><li data-type='method'><a href="module-_element.html#.elementBranch">elementBranch</a></li><li data-type='method'><a href="module-_element.html#.elementChildren">elementChildren</a></li><li data-type='method'><a href="module-_element.html#.elementChildTree">elementChildTree</a></li><li data-type='method'><a href="module-_element.html#.elementConcat">elementConcat</a></li><li data-type='method'><a href="module-_element.html#.elementDown">elementDown</a></li><li data-type='method'><a href="module-_element.html#.elementFind">elementFind</a></li><li data-type='method'><a href="module-_element.html#.elementFindDatum">elementFindDatum</a></li><li data-type='method'><a href="module-_element.html#.elementFirst">elementFirst</a></li><li data-type='method'><a href="module-_element.html#.elementFlat">elementFlat</a></li><li data-type='method'><a href="module-_element.html#.elementGrid">elementGrid</a></li><li data-type='method'><a href="module-_element.html#.elementGroup">elementGroup</a></li><li data-type='method'><a href="module-_element.html#.elementGroupDatum">elementGroupDatum</a></li><li data-type='method'><a href="module-_element.html#.elementIndex">elementIndex</a></li><li data-type='method'><a href="module-_element.html#.elementJoin">elementJoin</a></li><li data-type='method'><a href="module-_element.html#.elementMap">elementMap</a></li><li data-type='method'><a href="module-_element.html#.elementMapDatum">elementMapDatum</a></li><li data-type='method'><a href="module-_element.html#.elementParent">elementParent</a></li><li data-type='method'><a href="module-_element.html#.elementSave">elementSave</a></li><li data-type='method'><a href="module-_element.html#.elementUnique">elementUnique</a></li><li data-type='method'><a href="module-_element.html#.elementUniqueDatum">elementUniqueDatum</a></li><li data-type='method'><a href="module-_element.html#.elementUp">elementUp</a></li><li data-type='method'><a href="module-_element.html#.elementVertical">elementVertical</a></li><li data-type='method'><a href="module-_element.html#.elementWrap">elementWrap</a></li></ul></li><li><a href="module-_engine.html">_engine</a><ul class='methods'><li data-type='method'><a href="module-_engine.html#.assistIn">assistIn</a></li><li data-type='method'><a href="module-_engine.html#.cabQuery">cabQuery</a></li><li data-type='method'><a href="module-_engine.html#.capForm">capForm</a></li><li data-type='method'><a href="module-_engine.html#.capTab">capTab</a></li><li data-type='method'><a href="module-_engine.html#.configAnchor">configAnchor</a></li><li data-type='method'><a href="module-_engine.html#.configColumn">configColumn</a></li><li data-type='method'><a href="module-_engine.html#.configDialog">configDialog</a></li><li data-type='method'><a href="module-_engine.html#.configExecutor">configExecutor</a></li><li data-type='method'><a href="module-_engine.html#.configExecutors">configExecutors</a></li><li data-type='method'><a href="module-_engine.html#.configForm">configForm</a></li><li data-type='method'><a href="module-_engine.html#.configScroll">configScroll</a></li><li data-type='method'><a href="module-_engine.html#.configTab">configTab</a></li><li data-type='method'><a href="module-_engine.html#.configTable">configTable</a></li><li data-type='method'><a href="module-_engine.html#.createAction">createAction</a></li><li data-type='method'><a href="module-_engine.html#.dataIn">dataIn</a></li><li data-type='method'><a href="module-_engine.html#.dataOut">dataOut</a></li><li data-type='method'><a href="module-_engine.html#.fnOut">fnOut</a></li><li data-type='method'><a href="module-_engine.html#.fromHoc">fromHoc</a></li><li data-type='method'><a href="module-_engine.html#.fromPath">fromPath</a></li><li data-type='method'><a href="module-_engine.html#.raftForm">raftForm</a></li><li data-type='method'><a href="module-_engine.html#.rxAssist">rxAssist</a></li><li data-type='method'><a href="module-_engine.html#.rxCheckedRow">rxCheckedRow</a></li><li data-type='method'><a href="module-_engine.html#.rxCheckedTree">rxCheckedTree</a></li><li data-type='method'><a href="module-_engine.html#.rxDatum">rxDatum</a></li><li data-type='method'><a href="module-_engine.html#.rxEtat">rxEtat</a></li><li data-type='method'><a href="module-_engine.html#.rxFlow">rxFlow</a></li><li data-type='method'><a href="module-_engine.html#.rxResize">rxResize</a></li><li data-type='method'><a href="module-_engine.html#.storeApp">storeApp</a></li><li data-type='method'><a href="module-_engine.html#.storeModule">storeModule</a></li><li data-type='method'><a href="module-_engine.html#.storeUser">storeUser</a></li><li data-type='method'><a href="module-_engine.html#.writeAssist">writeAssist</a></li><li data-type='method'><a href="module-_engine.html#.writeClean">writeClean</a></li><li data-type='method'><a href="module-_engine.html#.writeSubmit">writeSubmit</a></li><li data-type='method'><a href="module-_engine.html#.writeTree">writeTree</a></li></ul></li><li><a href="module-_g.html">_g</a><ul class='methods'><li data-type='method'><a href="module-_g.html#.g2Chart">g2Chart</a></li></ul></li><li><a href="module-_is.html">_is</a><ul class='methods'><li data-type='method'><a href="module-_is.html#.isArray">isArray</a></li><li data-type='method'><a href="module-_is.html#.isAuthorized">isAuthorized</a></li><li data-type='method'><a href="module-_is.html#.isCn">isCn</a></li><li data-type='method'><a href="module-_is.html#.isCollection">isCollection</a></li><li data-type='method'><a href="module-_is.html#.isCurrency">isCurrency</a></li><li data-type='method'><a href="module-_is.html#.isDecimal">isDecimal</a></li><li data-type='method'><a href="module-_is.html#.isDiff">isDiff</a></li><li data-type='method'><a href="module-_is.html#.isEmpty">isEmpty</a></li><li data-type='method'><a href="module-_is.html#.isFunction">isFunction</a></li><li data-type='method'><a href="module-_is.html#.isInit">isInit</a></li><li data-type='method'><a href="module-_is.html#.isLogged">isLogged</a></li><li data-type='method'><a href="module-_is.html#.isNotEmpty">isNotEmpty</a></li><li data-type='method'><a href="module-_is.html#.isNumber">isNumber</a></li><li data-type='method'><a href="module-_is.html#.isObject">isObject</a></li><li data-type='method'><a href="module-_is.html#.isParent">isParent</a></li><li data-type='method'><a href="module-_is.html#.isQr">isQr</a></li><li data-type='method'><a href="module-_is.html#.isRoute">isRoute</a></li><li data-type='method'><a href="module-_is.html#.isRule">isRule</a></li><li data-type='method'><a href="module-_is.html#.isRuleAll">isRuleAll</a></li><li data-type='method'><a href="module-_is.html#.isRuleAny">isRuleAny</a></li><li data-type='method'><a href="module-_is.html#.isSame">isSame</a></li><li data-type='method'><a href="module-_is.html#.isSet">isSet</a></li><li data-type='method'><a href="module-_is.html#.isValid">isValid</a></li></ul></li><li><a href="module-_it.html">_it</a><ul class='methods'><li data-type='method'><a href="module-_it.html#.itAmb">itAmb</a></li><li data-type='method'><a href="module-_it.html#.itElement">itElement</a></li><li data-type='method'><a href="module-_it.html#.itFull">itFull</a></li><li data-type='method'><a href="module-_it.html#.itMatrix">itMatrix</a></li><li data-type='method'><a href="module-_it.html#.itObject">itObject</a></li><li data-type='method'><a href="module-_it.html#.itRepeat">itRepeat</a></li><li data-type='method'><a href="module-_it.html#.itRow">itRow</a></li><li data-type='method'><a href="module-_it.html#.itTree">itTree</a></li><li data-type='method'><a href="module-_it.html#.itUi">itUi</a></li><li data-type='method'><a href="module-_it.html#.itValue">itValue</a></li></ul></li><li><a href="module-_parser.html">_parser</a><ul class='methods'><li data-type='method'><a href="module-_parser.html#.aiExprAction">aiExprAction</a></li><li data-type='method'><a href="module-_parser.html#.aiExprAjax">aiExprAjax</a></li><li data-type='method'><a href="module-_parser.html#.aiExprButton">aiExprButton</a></li><li data-type='method'><a href="module-_parser.html#.aiExprButtons">aiExprButtons</a></li><li data-type='method'><a href="module-_parser.html#.aiExprColumn">aiExprColumn</a></li><li data-type='method'><a href="module-_parser.html#.aiExprCommand">aiExprCommand</a></li><li data-type='method'><a href="module-_parser.html#.aiExprCommands">aiExprCommands</a></li><li data-type='method'><a href="module-_parser.html#.aiExprDrawer">aiExprDrawer</a></li><li data-type='method'><a href="module-_parser.html#.aiExprField">aiExprField</a></li><li data-type='method'><a href="module-_parser.html#.aiExprFieldEx">aiExprFieldEx</a></li><li data-type='method'><a href="module-_parser.html#.aiExprFilter">aiExprFilter</a></li><li data-type='method'><a href="module-_parser.html#.aiExprIcon">aiExprIcon</a></li><li data-type='method'><a href="module-_parser.html#.aiExprOp">aiExprOp</a></li><li data-type='method'><a href="module-_parser.html#.aiExprOption">aiExprOption</a></li><li data-type='method'><a href="module-_parser.html#.aiExprPopover">aiExprPopover</a></li><li data-type='method'><a href="module-_parser.html#.aiExprTabs">aiExprTabs</a></li><li data-type='method'><a href="module-_parser.html#.aiExprTitle">aiExprTitle</a></li><li data-type='method'><a href="module-_parser.html#.aiExprWindow">aiExprWindow</a></li><li data-type='method'><a href="module-_parser.html#.applyArray">applyArray</a></li><li data-type='method'><a href="module-_parser.html#.applyColumn">applyColumn</a></li><li data-type='method'><a href="module-_parser.html#.applyConnect">applyConnect</a></li><li data-type='method'><a href="module-_parser.html#.applyItem">applyItem</a></li><li data-type='method'><a href="module-_parser.html#.applyKey">applyKey</a></li><li data-type='method'><a href="module-_parser.html#.applyKv">applyKv</a></li><li data-type='method'><a href="module-_parser.html#.applyLoading">applyLoading</a></li><li data-type='method'><a href="module-_parser.html#.applyRules">applyRules</a></li><li data-type='method'><a href="module-_parser.html#.applyStyle">applyStyle</a></li><li data-type='method'><a href="module-_parser.html#.applyValue">applyValue</a></li><li data-type='method'><a href="module-_parser.html#.parseAjax">parseAjax</a></li><li data-type='method'><a href="module-_parser.html#.parseField">parseField</a></li><li data-type='method'><a href="module-_parser.html#.parseInput">parseInput</a></li><li data-type='method'><a href="module-_parser.html#.parseQuery">parseQuery</a></li><li data-type='method'><a href="module-_parser.html#.parseValue">parseValue</a></li></ul></li><li><a href="module-_plugin.html">_plugin</a><ul class='methods'><li data-type='method'><a href="module-_plugin.html#.pluginEdition">pluginEdition</a></li><li data-type='method'><a href="module-_plugin.html#.pluginField">pluginField</a></li><li data-type='method'><a href="module-_plugin.html#.pluginForm">pluginForm</a></li><li data-type='method'><a href="module-_plugin.html#.pluginMetadata">pluginMetadata</a></li><li data-type='method'><a href="module-_plugin.html#.pluginOp">pluginOp</a></li><li data-type='method'><a href="module-_plugin.html#.pluginSelection">pluginSelection</a></li></ul></li><li><a href="module-_primary.html">_primary</a><ul class='members'><li data-type='member'><a href="module-_primary.html#.fn">fn</a></li></ul><ul class='methods'><li data-type='method'><a href="module-_primary.html#.assign">assign</a></li><li data-type='method'><a href="module-_primary.html#.clone">clone</a></li><li data-type='method'><a href="module-_primary.html#.element">element</a></li><li data-type='method'><a href="module-_primary.html#.immutable">immutable</a></li><li data-type='method'><a href="module-_primary.html#.initial">initial</a></li><li data-type='method'><a href="module-_primary.html#.parallel">parallel</a></li><li data-type='method'><a href="module-_primary.html#.pass">pass</a></li><li data-type='method'><a href="module-_primary.html#.passion">passion</a></li><li data-type='method'><a href="module-_primary.html#.pipe">pipe</a></li><li data-type='method'><a href="module-_primary.html#.prevent">prevent</a></li><li data-type='method'><a href="module-_primary.html#.promise">promise</a></li><li data-type='method'><a href="module-_primary.html#.ready">ready</a></li><li data-type='method'><a href="module-_primary.html#.signature">signature</a></li><li data-type='method'><a href="module-_primary.html#.token">token</a></li></ul></li><li><a href="module-_qr.html">_qr</a><ul class='methods'><li data-type='method'><a href="module-_qr.html#.qrClear">qrClear</a></li><li data-type='method'><a href="module-_qr.html#.qrCombine">qrCombine</a></li><li data-type='method'><a href="module-_qr.html#.qrCommon">qrCommon</a></li><li data-type='method'><a href="module-_qr.html#.qrComplex">qrComplex</a></li><li data-type='method'><a href="module-_qr.html#.qrForm">qrForm</a></li><li data-type='method'><a href="module-_qr.html#.qrInherit">qrInherit</a></li><li data-type='method'><a href="module-_qr.html#.qrInput">qrInput</a></li><li data-type='method'><a href="module-_qr.html#.qrTerms">qrTerms</a></li></ul></li><li><a href="module-_romantic.html">_romantic</a><ul class='methods'><li data-type='method'><a href="module-_romantic.html#.sexBatch">sexBatch</a></li><li data-type='method'><a href="module-_romantic.html#.sexCab">sexCab</a></li><li data-type='method'><a href="module-_romantic.html#.sexDialog">sexDialog</a></li><li data-type='method'><a href="module-_romantic.html#.sexIdentifier">sexIdentifier</a></li><li data-type='method'><a href="module-_romantic.html#.sexMessage">sexMessage</a></li><li data-type='method'><a href="module-_romantic.html#.sexModal">sexModal</a></li><li data-type='method'><a href="module-_romantic.html#.sexOp">sexOp</a></li><li data-type='method'><a href="module-_romantic.html#.sexTable">sexTable</a></li></ul></li><li><a href="module-_smart.html">_smart</a><ul class='methods'><li data-type='method'><a href="module-_smart.html#.smartForm">smartForm</a></li><li data-type='method'><a href="module-_smart.html#.smartList">smartList</a></li></ul></li><li><a href="module-_to.html">_to</a><ul class='methods'><li data-type='method'><a href="module-_to.html#.toArray">toArray</a></li><li data-type='method'><a href="module-_to.html#.toAssist">toAssist</a></li><li data-type='method'><a href="module-_to.html#.toCss">toCss</a></li><li data-type='method'><a href="module-_to.html#.toFileSize">toFileSize</a></li><li data-type='method'><a href="module-_to.html#.toForm">toForm</a></li><li data-type='method'><a href="module-_to.html#.toGrid">toGrid</a></li><li data-type='method'><a href="module-_to.html#.toGridSpan">toGridSpan</a></li><li data-type='method'><a href="module-_to.html#.toHeight">toHeight</a></li><li data-type='method'><a href="module-_to.html#.toHeightState">toHeightState</a></li><li data-type='method'><a href="module-_to.html#.toJson">toJson</a></li><li data-type='method'><a href="module-_to.html#.toKey">toKey</a></li><li data-type='method'><a href="module-_to.html#.toLimit">toLimit</a></li><li data-type='method'><a href="module-_to.html#.toLink">toLink</a></li><li data-type='method'><a href="module-_to.html#.toLoading">toLoading</a></li><li data-type='method'><a href="module-_to.html#.toLogout">toLogout</a></li><li data-type='method'><a href="module-_to.html#.toMessage">toMessage</a></li><li data-type='method'><a href="module-_to.html#.toOriginal">toOriginal</a></li><li data-type='method'><a href="module-_to.html#.toPagination">toPagination</a></li><li data-type='method'><a href="module-_to.html#.toPassword">toPassword</a></li><li data-type='method'><a href="module-_to.html#.toPid">toPid</a></li><li data-type='method'><a href="module-_to.html#.toProtocol">toProtocol</a></li><li data-type='method'><a href="module-_to.html#.toQuery">toQuery</a></li><li data-type='method'><a href="module-_to.html#.toRoute">toRoute</a></li><li data-type='method'><a href="module-_to.html#.toTime">toTime</a></li><li data-type='method'><a href="module-_to.html#.toTree">toTree</a></li><li data-type='method'><a href="module-_to.html#.toTreeArray">toTreeArray</a></li><li data-type='method'><a href="module-_to.html#.toTreeConfig">toTreeConfig</a></li><li data-type='method'><a href="module-_to.html#.toUrl">toUrl</a></li><li data-type='method'><a href="module-_to.html#.toWidth">toWidth</a></li><li data-type='method'><a href="module-_to.html#.toX">toX</a></li></ul></li><li><a href="module-_ui.html">_ui</a><ul class='methods'><li data-type='method'><a href="module-_ui.html#.activeColumn">activeColumn</a></li><li data-type='method'><a href="module-_ui.html#.activeSearch">activeSearch</a></li><li data-type='method'><a href="module-_ui.html#.activeTreeOff">activeTreeOff</a></li><li data-type='method'><a href="module-_ui.html#.activeTreeOn">activeTreeOn</a></li><li data-type='method'><a href="module-_ui.html#.anchorColumn">anchorColumn</a></li><li data-type='method'><a href="module-_ui.html#.anchorSearch">anchorSearch</a></li><li data-type='method'><a href="module-_ui.html#.anchorTree">anchorTree</a></li><li data-type='method'><a href="module-_ui.html#.columnWrapper">columnWrapper</a></li><li data-type='method'><a href="module-_ui.html#.formClear">formClear</a></li><li data-type='method'><a href="module-_ui.html#.formGet">formGet</a></li><li data-type='method'><a href="module-_ui.html#.formHit">formHit</a></li><li data-type='method'><a href="module-_ui.html#.formHits">formHits</a></li><li data-type='method'><a href="module-_ui.html#.formLinker">formLinker</a></li><li data-type='method'><a href="module-_ui.html#.formRead">formRead</a></li><li data-type='method'><a href="module-_ui.html#.formReset">formReset</a></li><li data-type='method'><a href="module-_ui.html#.formSubmit">formSubmit</a></li><li data-type='method'><a href="module-_ui.html#.htmlDisabled">htmlDisabled</a></li><li data-type='method'><a href="module-_ui.html#.htmlErrorBlur">htmlErrorBlur</a></li><li data-type='method'><a href="module-_ui.html#.htmlErrorFocus">htmlErrorFocus</a></li><li data-type='method'><a href="module-_ui.html#.htmlReadOnly">htmlReadOnly</a></li><li data-type='method'><a href="module-_ui.html#.onConfirm">onConfirm</a></li><li data-type='method'><a href="module-_ui.html#.onDatum">onDatum</a></li><li data-type='method'><a href="module-_ui.html#.onLinker">onLinker</a></li><li data-type='method'><a href="module-_ui.html#.onReference">onReference</a></li><li data-type='method'><a href="module-_ui.html#.onSave">onSave</a></li><li data-type='method'><a href="module-_ui.html#.onUniform">onUniform</a></li><li data-type='method'><a href="module-_ui.html#.writeDisabled">writeDisabled</a></li><li data-type='method'><a href="module-_ui.html#.writeImpact">writeImpact</a></li><li data-type='method'><a href="module-_ui.html#.writeInitial">writeInitial</a></li><li data-type='method'><a href="module-_ui.html#.writeLinker">writeLinker</a></li><li data-type='method'><a href="module-_ui.html#.writeReadOnly">writeReadOnly</a></li><li data-type='method'><a href="module-_ui.html#.writeSegment">writeSegment</a></li></ul></li><li><a href="module-_unity.html">_unity</a><ul class='methods'><li data-type='method'><a href="module-_unity.html#.ambArray">ambArray</a></li><li data-type='method'><a href="module-_unity.html#.ambEvent">ambEvent</a></li><li data-type='method'><a href="module-_unity.html#.ambFind">ambFind</a></li><li data-type='method'><a href="module-_unity.html#.ambKv">ambKv</a></li><li data-type='method'><a href="module-_unity.html#.ambObject">ambObject</a></li><li data-type='method'><a href="module-_unity.html#.ambValue">ambValue</a></li><li data-type='method'><a href="module-_unity.html#.connectId">connectId</a></li><li data-type='method'><a href="module-_unity.html#.connectItem">connectItem</a></li><li data-type='method'><a href="module-_unity.html#.connectRenders">connectRenders</a></li><li data-type='method'><a href="module-_unity.html#.connectValidator">connectValidator</a></li><li data-type='method'><a href="module-_unity.html#.decryptBase64">decryptBase64</a></li><li data-type='method'><a href="module-_unity.html#.dslArray">dslArray</a></li><li data-type='method'><a href="module-_unity.html#.encryptAES">encryptAES</a></li><li data-type='method'><a href="module-_unity.html#.encryptBase64">encryptBase64</a></li><li data-type='method'><a href="module-_unity.html#.encryptHmac512">encryptHmac512</a></li><li data-type='method'><a href="module-_unity.html#.encryptMD5">encryptMD5</a></li><li data-type='method'><a href="module-_unity.html#.forest">forest</a></li><li data-type='method'><a href="module-_unity.html#.forestGroup">forestGroup</a></li><li data-type='method'><a href="module-_unity.html#.formatCurrency">formatCurrency</a></li><li data-type='method'><a href="module-_unity.html#.formatDate">formatDate</a></li><li data-type='method'><a href="module-_unity.html#.formatExpr">formatExpr</a></li><li data-type='method'><a href="module-_unity.html#.formatNow">formatNow</a></li><li data-type='method'><a href="module-_unity.html#.formatObject">formatObject</a></li><li data-type='method'><a href="module-_unity.html#.formatPercent">formatPercent</a></li><li data-type='method'><a href="module-_unity.html#.formatQuery">formatQuery</a></li><li data-type='method'><a href="module-_unity.html#.formatTpl">formatTpl</a></li><li data-type='method'><a href="module-_unity.html#.mathDiscount">mathDiscount</a></li><li data-type='method'><a href="module-_unity.html#.mathDivision">mathDivision</a></li><li data-type='method'><a href="module-_unity.html#.mathMultiplication">mathMultiplication</a></li><li data-type='method'><a href="module-_unity.html#.mathSubtract">mathSubtract</a></li><li data-type='method'><a href="module-_unity.html#.mathSum">mathSum</a></li><li data-type='method'><a href="module-_unity.html#.randomArray">randomArray</a></li><li data-type='method'><a href="module-_unity.html#.randomInteger">randomInteger</a></li><li data-type='method'><a href="module-_unity.html#.randomString">randomString</a></li><li data-type='method'><a href="module-_unity.html#.randomUUID">randomUUID</a></li><li data-type='method'><a href="module-_unity.html#.sorterAsc">sorterAsc</a></li><li data-type='method'><a href="module-_unity.html#.sorterAscD">sorterAscD</a></li><li data-type='method'><a href="module-_unity.html#.sorterAscDFn">sorterAscDFn</a></li><li data-type='method'><a href="module-_unity.html#.sorterAscFn">sorterAscFn</a></li><li data-type='method'><a href="module-_unity.html#.sorterAscT">sorterAscT</a></li><li data-type='method'><a href="module-_unity.html#.sorterAscTFn">sorterAscTFn</a></li><li data-type='method'><a href="module-_unity.html#.sorterDesc">sorterDesc</a></li><li data-type='method'><a href="module-_unity.html#.sorterDescD">sorterDescD</a></li><li data-type='method'><a href="module-_unity.html#.sorterDescDFn">sorterDescDFn</a></li><li data-type='method'><a href="module-_unity.html#.sorterDescFn">sorterDescFn</a></li><li data-type='method'><a href="module-_unity.html#.sorterDescT">sorterDescT</a></li><li data-type='method'><a href="module-_unity.html#.sorterDescTFn">sorterDescTFn</a></li><li data-type='method'><a href="module-_unity.html#.sorterObject">sorterObject</a></li><li data-type='method'><a href="module-_unity.html#.tree">tree</a></li><li data-type='method'><a href="module-_unity.html#.treeChildren">treeChildren</a></li><li data-type='method'><a href="module-_unity.html#.treeChildrenAll">treeChildrenAll</a></li><li data-type='method'><a href="module-_unity.html#.treeChildrenAllIn">treeChildrenAllIn</a></li><li data-type='method'><a href="module-_unity.html#.treeFlip">treeFlip</a></li><li data-type='method'><a href="module-_unity.html#.treeParent">treeParent</a></li><li data-type='method'><a href="module-_unity.html#.treeParentAll">treeParentAll</a></li><li data-type='method'><a href="module-_unity.html#.treeParentAllIn">treeParentAllIn</a></li><li data-type='method'><a href="module-_unity.html#.treeShared">treeShared</a></li></ul></li><li><a href="module-_value.html">_value</a><ul class='methods'><li data-type='method'><a href="module-_value.html#.valueAppend">valueAppend</a></li><li data-type='method'><a href="module-_value.html#.valueArray">valueArray</a></li><li data-type='method'><a href="module-_value.html#.valueCopy">valueCopy</a></li><li data-type='method'><a href="module-_value.html#.valueDuration">valueDuration</a></li><li data-type='method'><a href="module-_value.html#.valueEndTime">valueEndTime</a></li><li data-type='method'><a href="module-_value.html#.valueExpr">valueExpr</a></li><li data-type='method'><a href="module-_value.html#.valueFabric">valueFabric</a></li><li data-type='method'><a href="module-_value.html#.valueFabrics">valueFabrics</a></li><li data-type='method'><a href="module-_value.html#.valueFactor">valueFactor</a></li><li data-type='method'><a href="module-_value.html#.valueFind">valueFind</a></li><li data-type='method'><a href="module-_value.html#.valueFloat">valueFloat</a></li><li data-type='method'><a href="module-_value.html#.valueInt">valueInt</a></li><li data-type='method'><a href="module-_value.html#.valueLadder">valueLadder</a></li><li data-type='method'><a href="module-_value.html#.valueLimit">valueLimit</a></li><li data-type='method'><a href="module-_value.html#.valueLink">valueLink</a></li><li data-type='method'><a href="module-_value.html#.valueNow">valueNow</a></li><li data-type='method'><a href="module-_value.html#.valueOk">valueOk</a></li><li data-type='method'><a href="module-_value.html#.valueOnChange">valueOnChange</a></li><li data-type='method'><a href="module-_value.html#.valuePair">valuePair</a></li><li data-type='method'><a href="module-_value.html#.valueParse">valueParse</a></li><li data-type='method'><a href="module-_value.html#.valuePath">valuePath</a></li><li data-type='method'><a href="module-_value.html#.valuePinyin">valuePinyin</a></li><li data-type='method'><a href="module-_value.html#.valueRequest">valueRequest</a></li><li data-type='method'><a href="module-_value.html#.valueStartTime">valueStartTime</a></li><li data-type='method'><a href="module-_value.html#.valueTime">valueTime</a></li><li data-type='method'><a href="module-_value.html#.valueTimes">valueTimes</a></li><li data-type='method'><a href="module-_value.html#.valueValid">valueValid</a></li></ul></li><li><a href="module-_xweb.html">_xweb</a><ul class='methods'><li data-type='method'><a href="module-_xweb.html#.xtChecked">xtChecked</a></li><li data-type='method'><a href="module-_xweb.html#.xtExprFlat">xtExprFlat</a></li><li data-type='method'><a href="module-_xweb.html#.xtFormat">xtFormat</a></li><li data-type='method'><a href="module-_xweb.html#.xtGet">xtGet</a></li><li data-type='method'><a href="module-_xweb.html#.xtInitArray">xtInitArray</a></li><li data-type='method'><a href="module-_xweb.html#.xtInitArrayMap">xtInitArrayMap</a></li><li data-type='method'><a href="module-_xweb.html#.xtInitFormat">xtInitFormat</a></li><li data-type='method'><a href="module-_xweb.html#.xtInitObject">xtInitObject</a></li><li data-type='method'><a href="module-_xweb.html#.xtLazyAjax">xtLazyAjax</a></li><li data-type='method'><a href="module-_xweb.html#.xtLazyInit">xtLazyInit</a></li><li data-type='method'><a href="module-_xweb.html#.xtLazyUp">xtLazyUp</a></li><li data-type='method'><a href="module-_xweb.html#.xtReady">xtReady</a></li><li data-type='method'><a href="module-_xweb.html#.xtRender">xtRender</a></li><li data-type='method'><a href="module-_xweb.html#.xtReset">xtReset</a></li><li data-type='method'><a href="module-_xweb.html#.xtRevert">xtRevert</a></li><li data-type='method'><a href="module-_xweb.html#.xtRowAdd">xtRowAdd</a></li><li data-type='method'><a href="module-_xweb.html#.xtRowChange">xtRowChange</a></li><li data-type='method'><a href="module-_xweb.html#.xtRowDel">xtRowDel</a></li><li data-type='method'><a href="module-_xweb.html#.xtSet">xtSet</a></li><li data-type='method'><a href="module-_xweb.html#.xtUnsafe">xtUnsafe</a></li><li data-type='method'><a href="module-_xweb.html#.xtUploadHandler">xtUploadHandler</a></li></ul></li><li><a href="module-web-ai.html">web-ai</a><ul class='methods'><li data-type='method'><a href="module-web-ai.html#.aiBreadcrumb">aiBreadcrumb</a></li><li data-type='method'><a href="module-web-ai.html#.aiLink">aiLink</a></li><li data-type='method'><a href="module-web-ai.html#.aiUrl">aiUrl</a></li></ul></li><li><a href="module-web-component.html">web-component</a><ul class='methods'><li data-type='method'><a href="module-web-component.html#.*Dialog">* Dialog</a></li><li data-type='method'><a href="module-web-component.html#.*DialogButton">* DialogButton</a></li><li data-type='method'><a href="module-web-component.html#.*DialogMenu">* DialogMenu</a></li><li data-type='method'><a href="module-web-component.html#.*PageCard">* PageCard</a></li><li data-type='method'><a href="module-web-component.html#.*Rectangle">* Rectangle</a></li><li data-type='method'><a href="module-web-component.html#.ColumnUser">ColumnUser</a></li><li data-type='method'><a href="module-web-component.html#.G6Editor">G6Editor</a></li><li data-type='method'><a href="module-web-component.html#.G6Viewer">G6Viewer</a></li><li data-type='method'><a href="module-web-component.html#.Graphic2">Graphic2</a></li><li data-type='method'><a href="module-web-component.html#.LoadingAlert">LoadingAlert</a></li><li data-type='method'><a href="module-web-component.html#.LoadingContent">LoadingContent</a></li><li data-type='method'><a href="module-web-component.html#.Navigation">Navigation</a></li><li data-type='method'><a href="module-web-component.html#.NavSwallow">NavSwallow</a></li></ul></li><li><a href="module-web-input.html">web-input</a><ul class='methods'><li data-type='method'><a href="module-web-input.html#.AddressSelector">AddressSelector</a></li><li data-type='method'><a href="module-web-input.html#.BraftEditor">BraftEditor</a></li><li data-type='method'><a href="module-web-input.html#.CheckJson">CheckJson</a></li><li data-type='method'><a href="module-web-input.html#.CheckTransfer">CheckTransfer</a></li><li data-type='method'><a href="module-web-input.html#.DialogEditor">DialogEditor</a></li><li data-type='method'><a href="module-web-input.html#.FileBatch">FileBatch</a></li><li data-type='method'><a href="module-web-input.html#.FileUpload">FileUpload</a></li><li data-type='method'><a href="module-web-input.html#.FileUpload">FileUpload</a></li><li data-type='method'><a href="module-web-input.html#.InputArray">InputArray</a></li><li data-type='method'><a href="module-web-input.html#.JsonEditor">JsonEditor</a></li><li data-type='method'><a href="module-web-input.html#.ListSelector">ListSelector</a></li><li data-type='method'><a href="module-web-input.html#.MagicView">MagicView</a></li><li data-type='method'><a href="module-web-input.html#.MatrixSelector">MatrixSelector</a></li><li data-type='method'><a href="module-web-input.html#.SearchInput">SearchInput</a></li><li data-type='method'><a href="module-web-input.html#.SearchRangeDate">SearchRangeDate</a></li><li data-type='method'><a href="module-web-input.html#.TableEditor">TableEditor</a></li><li data-type='method'><a href="module-web-input.html#.TreeSelector">TreeSelector</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#@zero">@zero</a></li><li><a href="global.html#assistOut">assistOut</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">web-component</h1>
    

    




<section>

<header>
    
        
            
        
    
</header>

<article>
    
        <div class="container-overview">
        
            
                <div class="description usertext"><h1>Zero Ui 中的Web组件</h1>
<h2>1.组件使用</h2>
<p>组使用的代码如下：</p>
<pre class="prettyprint source lang-js"><code>import { XXX } from 'web';

// .....
return (
     &lt;XXX/>
)
</code></pre>
<blockquote>
<p>economy组件层位于ux工具之上，可直接执行如下代码</p>
</blockquote>
<pre class="prettyprint source lang-js"><code>import Ux from 'ux';
</code></pre>
<h2>2.组件文档标记</h2>
<ol>
<li>属性props：直接从上层组件中继承过来的属性。</li>
<li>状态state：当前组件执行componentDidMount构造的状态。</li>
</ol>
<h2>3.组件列表</h2>
<blockquote>
<p>生命周期中的单个标记分别对应<code>Hoc生命周期，Mount初始化，Update更新</code>三个生命周期。</p>
</blockquote>
<table>
<thead>
<tr>
<th style="text-align:left">组件名</th>
<th style="text-align:left">生命周期</th>
<th>相关Ant组件</th>
<th style="text-align:left">className</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">* Dialog</td>
<td style="text-align:left">x o o</td>
<td><code>&lt;Modal/&gt;</code></td>
<td style="text-align:left">web-dialog <br> web-dynamic-dialog</td>
<td style="text-align:left">动态弹出框专用组件，可配置不同弹出框。</td>
</tr>
<tr>
<td style="text-align:left">* DialogButton</td>
<td style="text-align:left">x o x</td>
<td><code>&lt;Button/&gt;</code><br>-- <code>&lt;Modal/&gt;</code><br>-- <code>&lt;Drawer/&gt;</code><br/>-- <code>&lt;Popover/&gt;</code></td>
<td style="text-align:left">web-dialog-button-header</td>
<td style="text-align:left">带子组件的按钮，可渲染按钮内组件。</td>
</tr>
<tr>
<td style="text-align:left">* DialogMenu</td>
<td style="text-align:left">x o x</td>
<td><code>&lt;Dropdown/&gt;</code><br>--<code>&lt;Menu/&gt;</code><br>--<code>&lt;Button/&gt;</code></td>
<td style="text-align:left"></td>
<td style="text-align:left">包含子组件专用的菜单执行。</td>
</tr>
<tr>
<td style="text-align:left">* PageCard</td>
<td style="text-align:left">o o x</td>
<td><code>&lt;Card/&gt;</code></td>
<td style="text-align:left">web-card</td>
<td style="text-align:left">卡片组件容器。</td>
</tr>
<tr>
<td style="text-align:left">* Rectangle</td>
<td style="text-align:left">x x x</td>
<td><code>&lt;fieldset/&gt;</code></td>
<td style="text-align:left">web-rectangle</td>
<td style="text-align:left">「Html」专用HTML矩形元素。</td>
</tr>
<tr>
<td style="text-align:left">ColumnUser</td>
<td style="text-align:left">x o x</td>
<td><code>&lt;Fragment/&gt;</code></td>
<td style="text-align:left"></td>
<td style="text-align:left">表格中的列渲染专用<code>&lt;Table/&gt;</code>执行。</td>
</tr>
<tr>
<td style="text-align:left">G6Editor</td>
<td style="text-align:left">x o x</td>
<td>复杂元素</td>
<td style="text-align:left">web-g6-editor</td>
<td style="text-align:left">拓扑图编辑器</td>
</tr>
<tr>
<td style="text-align:left">G6Viewer</td>
<td style="text-align:left">x o x</td>
<td>复杂元素</td>
<td style="text-align:left">web-g6-viewer</td>
<td style="text-align:left">拓扑图查看器</td>
</tr>
<tr>
<td style="text-align:left">Graphic2</td>
<td style="text-align:left">x o o</td>
<td><code>&lt;div/&gt;</code></td>
<td style="text-align:left"></td>
<td style="text-align:left">G2渲染图信息。</td>
</tr>
<tr>
<td style="text-align:left">LoadingAlert</td>
<td style="text-align:left">x x x</td>
<td><code>&lt;Alert/&gt;</code></td>
<td style="text-align:left">web-alert-iconlist <br> web-alert-list <br> web-alert-text</td>
<td style="text-align:left">警告信息专用组件，支持多行文本、图标计算、多数据格式、直接配置模式。</td>
</tr>
<tr>
<td style="text-align:left">LoadingContent</td>
<td style="text-align:left">o x x</td>
<td><code>&lt;Spin/&gt;</code></td>
<td style="text-align:left">web-loading</td>
<td style="text-align:left">加载效果专用组件，支持组件/页面/区域三种。</td>
</tr>
<tr>
<td style="text-align:left">Navigation</td>
<td style="text-align:left">x x x</td>
<td><code>&lt;Breadcrumb/&gt;</code></td>
<td style="text-align:left">web-navigation</td>
<td style="text-align:left">面包屑导航组件。</td>
</tr>
<tr>
<td style="text-align:left">NavSwallow</td>
<td style="text-align:left">x x x</td>
<td><code>&lt;div/&gt;</code></td>
<td style="text-align:left">web-nav-swallow</td>
<td style="text-align:left">燕尾导航专用组件。</td>
</tr>
</tbody>
</table>
<h2>4.设计原则</h2>
<ol>
<li>属性传入过程中的所有内容（源 = props），都是通过编程方式传入，优先级最高，它通常会覆盖Zero Ui解析过后的默认行为。</li>
<li>只要存在状态数据，在<code>render</code>中都会调用<code>Ux.xtReady</code>方法执行加载完成后的第一个render，该操作可防止异步结果未完成导致的渲染错误。</li>
</ol>
<h3>4.1. 特殊说明</h3>
<ol>
<li>Dialog中的<code>web-dynamic-dialog</code>是遗留系统使用的className，新系统都会使用<code>web-dialog</code>来实现，暂时未重构。</li>
<li>组件中带<code>*</code>的表示当前组件支持<code>children</code>属性，即组件本身为容器组件。</li>
<li><code>FormDesigner</code>不提供文档说明，因为它主要存在于Ox中的配置模块，不属于标准操作，通常是直接使用。</li>
</ol>
<h3>4.2. 基础文件规范</h3>
<h4>4.2.1. 文件规范</h4>
<table>
<thead>
<tr>
<th style="text-align:left">文件</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">UI.js</td>
<td style="text-align:left">主入口源代码文件。</td>
</tr>
<tr>
<td style="text-align:left">Op.js</td>
<td style="text-align:left">事件专用源代码文件。</td>
</tr>
<tr>
<td style="text-align:left">Web.jsx</td>
<td style="text-align:left">Jsx渲染专用函数。</td>
</tr>
</tbody>
</table>
<h4>4.2.2. 函数规范</h4>
<table>
<thead>
<tr>
<th style="text-align:left">特定函数</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">componentCt</td>
<td style="text-align:left">构造函数，constructor函数专用。</td>
</tr>
<tr>
<td style="text-align:left">componentInit</td>
<td style="text-align:left">初始化函数，componentDidMount函数专用。</td>
</tr>
<tr>
<td style="text-align:left">componentUp</td>
<td style="text-align:left">更新函数，componentDidUpdate函数专用。</td>
</tr>
<tr>
<td style="text-align:left">renderXXX</td>
<td style="text-align:left">Jsx渲染专用函数。</td>
</tr>
<tr>
<td style="text-align:left">yiXXX</td>
<td style="text-align:left">初始化状态专用方法（子方法、主方法）。</td>
</tr>
<tr>
<td style="text-align:left">yoXXX</td>
<td style="text-align:left">渲染组件专用计算方法。</td>
</tr>
</tbody>
</table>
<h4>4.2.3. 属性状态规范</h4>
<table>
<thead>
<tr>
<th style="text-align:left">变量</th>
<th style="text-align:left">源</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">config</td>
<td style="text-align:left">props</td>
<td style="text-align:left">组件配置数据。</td>
</tr>
<tr>
<td style="text-align:left">data</td>
<td style="text-align:left">props</td>
<td style="text-align:left">组件核心数据（一般是业务数据）。</td>
</tr>
<tr>
<td style="text-align:left">rxInject</td>
<td style="text-align:left">props</td>
<td style="text-align:left">「开发专用」注入专用，修改配置用。</td>
</tr>
<tr>
<td style="text-align:left">$submitting</td>
<td style="text-align:left">props</td>
<td style="text-align:left">防重复提交的专用属性，$submitting = true表示正在提交。</td>
</tr>
<tr>
<td style="text-align:left">$ready</td>
<td style="text-align:left">state</td>
<td style="text-align:left">加载完成专用属性。</td>
</tr>
</tbody>
</table></div>
            

            
                




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>
































            
        
        </div>
    

    

    

    
    
    

     

    

    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    <h4 class="name" id=".*Dialog"><span class="type-signature">(static) </span>* Dialog<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>Dialog</code></h2>
<blockquote>
<p>旧名称依然可用：<code>DynamicDialog</code></p>
</blockquote>
<pre class="prettyprint source lang-js"><code>import { DynamicDialog } from 'web';     // 旧版本
import { Dialog } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Ok</td>
<td>Ok</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">className</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">当前窗口设置的className，默认<code>web-dynamic-dialog</code>。</td>
</tr>
<tr>
<td style="text-align:left">children</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">React中专用的<code>children</code>子元素信息。</td>
</tr>
<tr>
<td style="text-align:left">$visible</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">当前窗口是否显示（直接外层传入该变量）。</td>
</tr>
<tr>
<td style="text-align:left">$loading</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">当前窗口是否处于提交加载状态。</td>
</tr>
<tr>
<td style="text-align:left">$footer</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">是否定制过窗口的底部按钮，要重写<code>Ok/Cancel</code>时使用。</td>
</tr>
<tr>
<td style="text-align:left">rxOk</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Function</td>
<td style="text-align:left">点击确认按钮外置函数。</td>
</tr>
<tr>
<td style="text-align:left">rxCancel</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Function</td>
<td style="text-align:left">点击取消按钮外置函数。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String/Object</td>
<td style="text-align:left">String格式通过aiExprWindow转换成Object。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>title</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">「Ant」窗口标题。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>okText</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">「Ant」OK按钮使用文字。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>cancelText</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">「Ant」取消按钮使用文字。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>visible</td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">「Deprecated」直接使用<code>$visible</code>代替。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>width</td>
<td style="text-align:left">props</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">「Ant」窗口宽度。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>maskClosable</td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">「Ant」点击遮罩是否触发关闭动作。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>onOk</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">「自定义」点击<code>onOk</code>按钮触发的<code>Ux.connectId</code>锚点，该事件会被外层的<code>rxOk</code>覆盖。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td>component</td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">「自定义」新版支持，窗口内的children元素的替换元素，当前组件不用，但外层解析会使用。</td>
</tr>
<tr>
<td style="text-align:left">$ready</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">标识当前组件已经加载完成。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. 资源解析</h4>
<p>配置信息<code>$dialog</code>的示例如（String模式）：</p>
<p><code>title,okText,cancelText,visible,width,maskClosable,onOk,component</code></p>
<h4>3.2. 关于$footer</h4>
<p>只有okText属性没有传值时，<code>$footer</code>设置的内容才会生效，也就是说如果要定制footer，那么需要将okText设置
为空字符串<code>&quot;&quot;</code>。</p>
<h4>3.3. 关于onOk</h4>
<p>onOk在不传入<code>rxOk</code>外层函数时会直接触发<code>Ux.connectId</code>去点击链接的<code>onOk</code>元素的<code>onClick</code>事件，如果传入了
<code>rxOk</code>则默认的链接点击行为会被废弃，而使用外层属性。</p>
</div>




























        
            

    

    <h4 class="name" id=".*DialogButton"><span class="type-signature">(static) </span>* DialogButton<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>DialogButton</code></h2>
<pre class="prettyprint source lang-js"><code>import { DialogButton } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Ok</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">children</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">React级别的子组件。</td>
</tr>
<tr>
<td style="text-align:left">$content</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">传入的子组件，该子组件优先级低于children。</td>
</tr>
<tr>
<td style="text-align:left">$hidden</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否隐藏当前按钮，如果为true则隐藏按钮。</td>
</tr>
<tr>
<td style="text-align:left">$mode</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">设置三种模式：<code>DIALOG | DRAWER | POPOVER</code>。</td>
</tr>
<tr>
<td style="text-align:left">$button</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String/Object</td>
<td style="text-align:left">调用<code>aiExprAction</code>解析该配置生成按钮专用配置。</td>
</tr>
<tr>
<td style="text-align:left">$dialog</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">不同窗口模式使用不同配置完成。</td>
</tr>
<tr>
<td style="text-align:left">$loading</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否处于提交/加载状态。</td>
</tr>
<tr>
<td style="text-align:left">rxClick</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Function</td>
<td style="text-align:left">按钮点击的回调函数，在点击按钮设置visible=true过后执行该回调。</td>
</tr>
<tr>
<td style="text-align:left">rxOk</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Function</td>
<td style="text-align:left">优先考虑使用外层rxOk执行该函数，如果是String则直接触发<code>Ux.connectId</code>操作。</td>
</tr>
<tr>
<td style="text-align:left">button</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">存储在当前组件的按钮配置。</td>
</tr>
<tr>
<td style="text-align:left">dialog</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">存储在当前组件的窗口配置。</td>
</tr>
<tr>
<td style="text-align:left">visible</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">显示/隐藏窗口专用配置。</td>
</tr>
<tr>
<td style="text-align:left">render</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Function</td>
<td style="text-align:left">专用Jsx的渲染函数。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. 关于子组件的计算</h4>
<ol>
<li>过滤掉的属性表：
<ul>
<li><code>$disabled</code></li>
<li><code>$button</code></li>
<li><code>$dialog</code></li>
<li><code>$mode</code></li>
<li><code>$inited</code></li>
<li><code>$content</code></li>
</ul>
</li>
<li>其他属性再追加<code>rxClose</code>专用方法关闭窗口进行继承。</li>
<li>内置窗口使用<code>Dialog</code>组件替换原生的<code>&lt;Modal/&gt;</code>操作，来完成状态注入。</li>
</ol>
<h4>3.2. 模式解析</h4>
<p><code>$mode</code>设置的值生成三种不同的窗口：</p>
<ul>
<li>DIALOG：弹出窗口组件<code>&lt;Modal/&gt;</code>。</li>
<li>DRAWER：抽屉窗口组件<code>&lt;Drawer/&gt;</code>。</li>
<li>POPOVER：浮游窗口组件<code>&lt;Popover/&gt;</code>。</li>
</ul>
<h4>3.3. 状态说明</h4>
<ul>
<li><code>$loading</code>：组件是否处于加载状态，当前按钮的加载状态等价于提交状态，这个值会传递给子组件。</li>
<li><code>visible</code>：用于记录当前组件的现实和隐藏的专用属性，注意这个属性和Zero Ui规范中的<code>$visible</code>有一定区别，原因是这个组件是旧组件，历史太长，暂时没做更改。</li>
</ul>
</div>




























        
            

    

    <h4 class="name" id=".*DialogMenu"><span class="type-signature">(static) </span>* DialogMenu<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>DialogMenu</code></h2>
<pre class="prettyprint source lang-js"><code>import { DialogMenu } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Ok</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$mode</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">设置窗口模式：<code>DIALOG | DRAWER</code>，该组件不支持浮游窗口。</td>
</tr>
<tr>
<td style="text-align:left">$items</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Array</td>
<td style="text-align:left">菜单项相关配置。</td>
</tr>
<tr>
<td style="text-align:left">$button</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String/Object</td>
<td style="text-align:left">调用<code>aiExprAction</code>解析该配置生成按钮专用配置。</td>
</tr>
<tr>
<td style="text-align:left">$content</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">不同菜单渲染的组件对象，上层传入外置对象。</td>
</tr>
<tr>
<td style="text-align:left">$inited</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">初始化表单值信息。</td>
</tr>
<tr>
<td style="text-align:left">$loading</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否处于提交/加载状态。</td>
</tr>
<tr>
<td style="text-align:left">$functions</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">执行CONFIRM时的回调函数，用于处理回调信息。</td>
</tr>
<tr>
<td style="text-align:left">button</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">主按钮配置信息。</td>
</tr>
<tr>
<td style="text-align:left">items</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Array</td>
<td style="text-align:left">菜单项专用配置。</td>
</tr>
<tr>
<td style="text-align:left">renders</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">生成的子组件渲染器。</td>
</tr>
<tr>
<td style="text-align:left">visible</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Object</td>
<td style="text-align:left"><code>key</code>=true/false，记录每个菜单项组件的显示/隐藏。</td>
</tr>
<tr>
<td style="text-align:left">windows</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Object</td>
<td style="text-align:left"><code>key</code>=配置，记录每个窗口的配置信息。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. 单个选项结构</h4>
<pre class="prettyprint source lang-json"><code>{
    &quot;button&quot;: &quot;按钮配置&quot;,
    &quot;dialog&quot;: &quot;窗口配置&quot;,
    &quot;component&quot;: &quot;使用的组件key，对应$content变量&quot;,
    &quot;confirm&quot;: &quot;删除专用，带有浮游提示窗口（是否）&quot;,
    &quot;init&quot;: &quot;布尔值，是否给子组件传入初始化数据信息。&quot;
}
</code></pre>
<h4>3.2. 三种执行器</h4>
<ul>
<li>DIRECT：直接执行函数的执行器。</li>
<li>DIALOG：窗口执行器，设置显示/隐藏专用执行器。</li>
<li>CONFIRM：直接应用<code>Modal.confirm</code>的执行器。</li>
</ul>
<h4>3.3. 初始化数据渲染器</h4>
<ol>
<li>先从props中读取<code>$inited</code>变量作为表单初始化变量。</li>
<li>判断<code>init</code>的值，过滤
<ul>
<li><code>$disabled</code></li>
<li><code>$disabledItems</code></li>
<li><code>$inited</code></li>
<li><code>$items</code></li>
<li><code>$button</code></li>
<li><code>$functions</code></li>
<li><code>$content</code></li>
<li><code>$mode</code></li>
</ul>
</li>
<li>为<code>$inited</code>和<code>$parent</code>赋值
<ul>
<li>带<code>_</code>前缀的字段直接放到<code>$inited</code>中。</li>
<li>$parent中存储的就是$inited数据。</li>
</ul>
</li>
<li>追加<code>rxClose</code>专用方法进入子组件。</li>
</ol>
<h4>3.4. 状态说明</h4>
<ul>
<li><code>$loading</code>：组件是否处于加载状态，当前按钮的加载状态等价于提交状态，这个值会传递给子组件。</li>
<li><code>visible</code>：此处是一个Object类型，记录了每个组件的显示和隐藏状态。</li>
</ul>
</div>




























        
            

    

    <h4 class="name" id=".*PageCard"><span class="type-signature">(static) </span>* PageCard<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>PageCard</code></h2>
<pre class="prettyprint source lang-js"><code>import { PageCard } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ok</td>
<td>Ok</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">children</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">React中专用的<code>children</code>子元素信息。</td>
</tr>
<tr>
<td style="text-align:left">reference</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">React</td>
<td style="text-align:left">父引用，遵循Zero Ui的规范，该变量为固定变量，引用父组件。</td>
</tr>
<tr>
<td style="text-align:left">className</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">外置传入className，计算最终的风格专用属性，默认<code>web-card</code>。</td>
</tr>
<tr>
<td style="text-align:left">$key</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">读取外层绑定资源文件，调用<code>Ux.fromXX</code>作用于reference，默认读取<code>_page</code>节点。</td>
</tr>
<tr>
<td style="text-align:left">$submitting</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否处于提交状态，如果提交状态，则会计算按钮的loading属性。</td>
</tr>
<tr>
<td style="text-align:left">$title</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">卡片标题文本数据，优先使用<code>$title</code>属性，</td>
</tr>
<tr>
<td style="text-align:left">$leftVisible</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否隐藏左边按钮。</td>
</tr>
<tr>
<td style="text-align:left">$rightVisible</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否隐藏右边按钮。</td>
</tr>
<tr>
<td style="text-align:left">$backVisible</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否隐藏返回按钮。</td>
</tr>
<tr>
<td style="text-align:left">$disabled</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">按钮禁用状态计算，根据不同的状态禁用对应按钮。</td>
</tr>
<tr>
<td style="text-align:left">$extra</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">是否执行extra属性的注入，计算extraContent部分。</td>
</tr>
<tr>
<td style="text-align:left">rxInject</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Function</td>
<td style="text-align:left">「开发专用」注入配置专用函数。</td>
</tr>
<tr>
<td style="text-align:left">$config</td>
<td>left</td>
<td style="text-align:left">state</td>
<td style="text-align:left">Array</td>
<td style="text-align:left">卡片组件左侧按钮。</td>
</tr>
<tr>
<td style="text-align:left">$config</td>
<td>right</td>
<td style="text-align:left">state</td>
<td style="text-align:left">Array</td>
<td style="text-align:left">卡片组件右侧按钮。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. 工具栏</h4>
<p>整个PageCard工具栏分为三部分</p>
<table>
<thead>
<tr>
<th>左</th>
<th>右</th>
<th>关闭</th>
</tr>
</thead>
<tbody>
<tr>
<td>左侧按钮区间</td>
<td>右侧按钮区间</td>
<td>关闭按钮区间</td>
</tr>
<tr>
<td>$leftVisible</td>
<td>$rightVisible</td>
<td>$backVisible</td>
</tr>
</tbody>
</table>
<p>如果传入了<code>$extra</code>变量，那么这个Jsx元素会替换掉<code>$rightVisible和$backVisible</code>两个区域的组件。</p>
<h4>3.2. 防重复提交</h4>
<p>左侧和右侧的按钮通常会使用<code>Ux.connectId</code>方法触发按钮点击动作，并且会根据<code>$submitting</code>的值来判断
当前按钮是否处于加载状态，即使是不在当前组件的子组件中，也可以直接使用该值来渲染按钮的加载。</p>
<h4>3.3. 禁用状态</h4>
<p><code>$config</code>变量中存储了<code>left</code>和<code>right</code>中每一个按钮的<code>key</code>信息，而<code>$disabled</code>则存储了禁用启用状态（外置传入）。</p>
<p>假设<code>$disabled</code>包含了值：</p>
<pre class="prettyprint source lang-json"><code>{
    &quot;key1&quot;: true,
    &quot;key2&quot;: true
}
</code></pre>
<p>上述配置会禁用<code>key1</code>和<code>key2</code>的按钮信息。</p>
</div>




























        
            

    

    <h4 class="name" id=".*Rectangle"><span class="type-signature">(static) </span>* Rectangle<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>Rectangle</code></h2>
<pre class="prettyprint source lang-js"><code>import { Rectangle } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">children</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Jsx</td>
<td style="text-align:left">React中专用的<code>children</code>子元素信息。</td>
</tr>
<tr>
<td style="text-align:left">config</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">config</td>
<td>title</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left"><code>&lt;fieldset/&gt;</code>元素中的<code>legend</code>专用。</td>
</tr>
</tbody>
</table>
</div>




























        
            

    

    <h4 class="name" id=".ColumnUser"><span class="type-signature">(static) </span>ColumnUser<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>ColumnUser</code></h2>
<pre class="prettyprint source lang-js"><code>import { ColumnUser } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Ok</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">config</td>
<td>uri</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">Ajax加载专用uri配置。</td>
</tr>
<tr>
<td style="text-align:left">config</td>
<td>field</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">Ajax响应读取字段<code>field</code>提取为最终渲染。</td>
</tr>
<tr>
<td style="text-align:left">config</td>
<td>expr</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">Ajax更新的表达式，如果存在expr则使用响应数据执行格式化。</td>
</tr>
<tr>
<td style="text-align:left">config</td>
<td>icon</td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否在当前列中显示图标信息。</td>
</tr>
<tr>
<td style="text-align:left">$icon</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String/Object</td>
<td style="text-align:left">当前列所使用的<code>&lt;Icon/&gt;</code>相关信息。</td>
</tr>
<tr>
<td style="text-align:left">$key</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Any</td>
<td style="text-align:left">加载记录的专用主键信息，只提供主键信息。</td>
</tr>
<tr>
<td style="text-align:left">$empty</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">如果没有读取到数据则传入该值表示空数据渲染。</td>
</tr>
<tr>
<td style="text-align:left">value</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">String</td>
<td style="text-align:left">计算出来的最终呈现的文字信息。</td>
</tr>
<tr>
<td style="text-align:left">$system</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是显示系统图标还是应用图标。</td>
</tr>
<tr>
<td style="text-align:left">$ready</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">标识当前组件已经加载完成。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. 关于Ajax加载</h4>
<ul>
<li>该组件位于<code>&lt;Table/&gt;</code>元素中渲染特定列<code>USER</code>专用，此处有个误区就是列的名称，这里应用了<code>ColumnUser</code>是因为最早的设计中它是为了加载<strong>创建人、更新人</strong>而量身定制的列，而后续更改过后，依旧维持了这个名字，没有更改。</li>
<li>该组件中的Ajax只支持<code>GET</code>方法，内部调用<code>Ux.ajaxGet(uri,{key});</code>方法执行相关操作，这也是该列的限制。</li>
</ul>
<h4>3.2. 关于Icon计算</h4>
<ol>
<li>如果state中计算的<code>$system=true</code>，则直接设置图标为<code>type = setting</code>为图标类型，颜色<code>#7D7D7D</code>。</li>
<li>相反则直接读取<code>$icon</code>图标信息，如果没有提供则直接使用<code>type = user</code>为图标类型，颜色<code>#CD2990</code>。</li>
</ol>
<p>图标类型的格式为：</p>
<p><code>&lt;type&gt;,&lt;color&gt;</code></p>
<p>图标的尺寸不能设置，只能是16，但是颜色可以根据提供的<code>$icon</code>来进行设置。</p>
</div>




























        
            

    

    <h4 class="name" id=".G6Editor"><span class="type-signature">(static) </span>G6Editor<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>G6Editor</code></h2>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Ok</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$gEvent</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">GEvent</td>
<td style="text-align:left">图综合对象。</td>
</tr>
<tr>
<td style="text-align:left">$ready</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">标识当前组件已经加载完成。</td>
</tr>
</tbody>
</table>
</div>




























        
            

    

    <h4 class="name" id=".G6Viewer"><span class="type-signature">(static) </span>G6Viewer<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>G6Viewer</code></h2>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Ok</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$gEvent</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">GEvent</td>
<td style="text-align:left">图综合对象。</td>
</tr>
<tr>
<td style="text-align:left">$ready</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">标识当前组件已经加载完成。</td>
</tr>
</tbody>
</table>
</div>




























        
            

    

    <h4 class="name" id=".Graphic2"><span class="type-signature">(static) </span>Graphic2<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>Graphic2</code></h2>
<pre class="prettyprint source lang-js"><code>import { Graphic2 } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>Ok</td>
<td>Ok</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">config</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">g2图形专用配置数据。</td>
</tr>
<tr>
<td style="text-align:left">data</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Array</td>
<td style="text-align:left">渲染图形专用的数据。</td>
</tr>
<tr>
<td style="text-align:left">$gid</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">当前g2图形的<code>&lt;div/&gt;</code>的id属性，g2的API专用。</td>
</tr>
<tr>
<td style="text-align:left">$gFn</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Function</td>
<td style="text-align:left">构造配置的专用函数。</td>
</tr>
<tr>
<td style="text-align:left">$g2</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Object</td>
<td style="text-align:left">最终计算出来的配置信息。</td>
</tr>
<tr>
<td style="text-align:left">$ready</td>
<td></td>
<td style="text-align:left">state</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">标识当前组件已经加载完成。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. <code>$gFn</code>函数</h4>
<p><code>$gFn</code>是一个必须传入的函数，用于构造graphic引用，这个引用可直接调用下边API执行图形渲染，
目前可绑定的函数如：</p>
<ul>
<li><code>Ux.g2Bar</code>：饼图构造函数。</li>
</ul>
</div>




























        
            

    

    <h4 class="name" id=".LoadingAlert"><span class="type-signature">(static) </span>LoadingAlert<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>LoadingAlert</code></h2>
<pre class="prettyprint source lang-js"><code>import { LoadingAlert } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">className</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">外置传入className，计算最终的风格专用属性。</td>
</tr>
<tr>
<td style="text-align:left">$type</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">警告的类型，类型值包括：<code>success, info, warning, error</code>。</td>
</tr>
<tr>
<td style="text-align:left">$icon</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">图标专用属性，设置图标类型。</td>
</tr>
<tr>
<td style="text-align:left">$size</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">图标字体信息，对应style中的<code>fontSize</code>。</td>
</tr>
<tr>
<td style="text-align:left">$alert</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Object</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">$alert</td>
<td>hideIcon</td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">「Ant」是否隐藏图标，和showIcon的最终值相反。</td>
</tr>
<tr>
<td style="text-align:left">$alert</td>
<td>type</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">「Ant」配置数据中设置type字段信息。</td>
</tr>
<tr>
<td style="text-align:left">$alert</td>
<td>message</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">「Ant」警告信息的标题属性。</td>
</tr>
<tr>
<td style="text-align:left">$alert</td>
<td>description</td>
<td style="text-align:left">props</td>
<td style="text-align:left">String/Array</td>
<td style="text-align:left">「Ant」警告信息的描述信息，可支持多行描述信息。</td>
</tr>
</tbody>
</table>
<h4>2.1. $alert结构示例</h4>
<pre class="prettyprint source lang-json"><code>{
    &quot;message&quot;: &quot;标题文字&quot;,
    &quot;description&quot;: [],
    &quot;type&quot;: &quot;配置的type&quot;,
    &quot;hideIcon&quot;: &quot;是否隐藏图标&quot;
}
</code></pre>
<h3>3. 组件核心点</h3>
<h4>3.1. description处理</h4>
<ol>
<li>如果类型是String，则直接将description作为渲染文本基础元素来处理。</li>
<li>如果类型是Array，长度为1，则直接将第一个元素作为渲染文本来处理。</li>
<li>如果类型是Array，长度大于1，则使用<code>&lt;ul/&gt;</code>的列表方式渲染多行文本。</li>
</ol>
<h4>3.2. type执行流程</h4>
<ol>
<li>优先选择props中的<code>$type</code>属性。</li>
<li>然后使用props中<code>$alert</code>中的<code>type</code>属性。</li>
<li>如果都没传入则使用默认值<code>info</code>。</li>
</ol>
<h4>3.3. icon计算流程</h4>
<ol>
<li>优先选择props中的<code>$icon</code>属性。</li>
<li>然后使用props中<code>$alert</code>中的<code>icon</code>属性。</li>
<li>如果1和2都读取不了任何数据，则为<strong>无图标模式</strong>，否则为<strong>有图标模式</strong>。</li>
</ol>
<h4>3.4. 其他</h4>
<ol>
<li>组件外层有<code>&lt;div/&gt;</code>元素执行封装。</li>
<li>计算<code>&lt;Alert/&gt;</code>的属性后传入，其中description和icon都可直接使用Jsx语法直接渲染。</li>
<li>最外层的className有两种选择：
<ol>
<li><code>showIcon = true</code>有图标模式：<code>web-alert-iconlist</code>。</li>
<li><code>showIcon = true</code>无图标模式：<code>web-alert-list</code>。</li>
<li><code>showIcon = false</code>纯模式：<code>web-alert-text</code>。</li>
</ol>
</li>
</ol>
</div>




























        
            

    

    <h4 class="name" id=".LoadingContent"><span class="type-signature">(static) </span>LoadingContent<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>LoadingContent</code></h2>
<pre class="prettyprint source lang-js"><code>import { LoadingContent } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ok</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$height</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Number/String</td>
<td style="text-align:left">当前加载遮罩的高度，默认高度为100%（自动填充满）</td>
</tr>
<tr>
<td style="text-align:left">$tip</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">当前组件呈现的文字信息，默认根据资源文件计算。</td>
</tr>
<tr>
<td style="text-align:left">$top</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">String</td>
<td style="text-align:left">高度单位，可设置成paddingTop的值，默认：<code>窗口高度 x 1/4</code>。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. 资源文件</h4>
<p>文件位置：<code>cab/&lt;LANGUAGE&gt;/economy/web/LoadingContent.json</code></p>
<p>文件内容：</p>
<pre class="prettyprint source lang-json"><code>{
     &quot;loading&quot;: &quot;数据加载中……&quot;
}
</code></pre>
<h4>3.2. 属性计算</h4>
<p>传入的三个属性主要是为计算最外层<code>&lt;div/&gt;</code>的<code>style</code>属性，</p>
</div>




























        
            

    

    <h4 class="name" id=".Navigation"><span class="type-signature">(static) </span>Navigation<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>Navigation</code></h2>
<blockquote>
<p>旧名称依然可用：<code>PagerHeader</code></p>
</blockquote>
<pre class="prettyprint source lang-js"><code>import { PagerHeader } from 'web';     // 旧版本
import { Navigation } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$router</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">DataRouter</td>
<td style="text-align:left">特殊属性$router用于执行路由操作的专用对象。</td>
</tr>
<tr>
<td style="text-align:left">$navs</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Array</td>
<td style="text-align:left">每个元素最终用于<code>aiLink</code>操作。</td>
</tr>
</tbody>
</table>
<blockquote>
<p>面包屑导航渲染，通常用于主界面的二级面包屑导航，链接会禁用<code>&lt;a/&gt;</code>的<code>href</code>导航而采用<code>react-router</code>中的路由导航功能。</p>
</blockquote>
</div>




























        
            

    

    <h4 class="name" id=".NavSwallow"><span class="type-signature">(static) </span>NavSwallow<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description usertext">
    <h2>「组件」<code>NavSwallow</code></h2>
<pre class="prettyprint source lang-js"><code>import { NavSwallow } from 'web';
</code></pre>
<h3>1. 生命周期</h3>
<table>
<thead>
<tr>
<th>Hoc高阶周期</th>
<th>Mount初始化</th>
<th>Update更新</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
<h3>2. 属性说明</h3>
<table>
<thead>
<tr>
<th style="text-align:left">属性名</th>
<th>二级属性</th>
<th style="text-align:left">源</th>
<th style="text-align:left">类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$common</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">是否普通模式。</td>
</tr>
<tr>
<td style="text-align:left">$steps</td>
<td>title</td>
<td style="text-align:left">props</td>
<td style="text-align:left">Array</td>
<td style="text-align:left">当前步骤的标题信息。</td>
</tr>
<tr>
<td style="text-align:left">$current</td>
<td></td>
<td style="text-align:left">props</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">激活的当前步骤，从0开始，配合索引计算。</td>
</tr>
</tbody>
</table>
<h3>3. 组件核心点</h3>
<h4>3.1. 特定className的值</h4>
<table>
<thead>
<tr>
<th>$common属性</th>
<th>节点类型</th>
<th style="text-align:left">className值</th>
</tr>
</thead>
<tbody>
<tr>
<td>true</td>
<td>开始节点</td>
<td style="text-align:left">step start-common</td>
</tr>
<tr>
<td>true</td>
<td>中间节点</td>
<td style="text-align:left">step-middle</td>
</tr>
<tr>
<td>true</td>
<td>结束节点</td>
<td style="text-align:left">step-middle</td>
</tr>
<tr>
<td>false</td>
<td>开始节点</td>
<td style="text-align:left">step</td>
</tr>
<tr>
<td>false</td>
<td>中间节点</td>
<td style="text-align:left">step-middle</td>
</tr>
<tr>
<td>false</td>
<td>结束节点</td>
<td style="text-align:left">step-end</td>
</tr>
<tr>
<td>无关</td>
<td>激活节点</td>
<td style="text-align:left">step-active</td>
</tr>
</tbody>
</table>
</div>




























        
    

    

    
</article>

</section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Fri Apr 15 2022 15:55:07 GMT+0800 (China Standard Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>



</body>
</html>